<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="积分记录"
        @click-left="back"
      >
        <template #left>
          <van-icon name="arrow-left" size="16px" color="#333" />
        </template>
      </van-nav-bar>
    </div>
    <div class="downmenu">
      <div>
        {{ value1 == "" ? this.getDate2(currentDate) : this.getDate2(value1) }}
      </div>
      <van-icon name="arrow-down" @click="choiceDate" />
      <div>|</div>
      <div>{{ value2 == "" ? "全部" : value2 }}</div>
      <van-icon name="arrow-down" @click="choiceAll" />
    </div>
    <div class="textarea">
      <div class="text" v-for="(item, index) in integralList" :key="index">
        <div>
          <div>
            <div>{{ item.content }}</div>
          </div>
          <div>{{ item.time }}</div>
        </div>
        <div v-if="item.payment == 2">+{{ item.total }}</div>
        <div v-if="item.payment == 1" class="reduce">-{{ item.total }}</div>
      </div>
    </div>
    <div class="popup">
      <van-popup v-model="show1" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onConfirm1"
          @cancel="onCancel1"
        />
      </van-popup>
      <van-popup v-model="show2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm2"
          @cancel="onCancel2"
        />
      </van-popup>
    </div>
    <div class="noMore" v-if="length == 0">
      没&nbsp;有&nbsp;更&nbsp;多&nbsp;了&nbsp;~
    </div>
  </div>
</template>
<script>
import { getIntegralList } from "@/apis/integral.js";
export default {
  data() {
    return {
      show1: false,
      show2: false,
      minDate: new Date(2022, 3, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      columns: ["收入", "支出"],
      value1: "",
      value2: "",
      integralList: [],
      length: "",
      currentPage: 1,
      loading: true,
    };
  },
  mounted() {
    this.getIntegral();
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        var params;
        if (this.value2 == "") {
          params = {
            currentPage: this.currentPage,
            perPage: 10,
            startTime:
              this.value1 == ""
                ? this.getDate2(this.currentDate)
                : this.getDate2(this.value1),
            payment: "",
          };
          getIntegralList();
        }
        if (this.value2 == "支出") {
          params = {
            currentPage: this.currentPage,
            perPage: 10,
            startTime:
              this.value1 == ""
                ? this.getDate2(this.currentDate)
                : this.getDate2(this.value1),
            payment: 1,
          };
          getIntegralList();
        }
        if (this.value2 == "收入") {
          params = {
            currentPage: this.currentPage,
            perPage: 10,
            startTime:
              this.value1 == ""
                ? this.getDate2(this.currentDate)
                : this.getDate2(this.value1),
            payment: 2,
          };
          getIntegralList();
        }
        getIntegralList(params).then((res) => {
          console.log("getIntegral:", res);
          console.log(params);
          this.length = res.result.length;
          // if (res.result.length != 10) {
          //   this.loading = false;
          // }
          this.integralList = [...this.integralList, ...res.result.list];
        });
      }
    },
    getIntegral() {
      var params;
      if (this.value2 == "") {
        params = {
          currentPage: 1,
          perPage: 10,
          startTime:
            this.value1 == ""
              ? this.getDate2(this.currentDate)
              : this.getDate2(this.value1),
          payment: "",
        };
        getIntegralList();
      }
      if (this.value2 == "支出") {
        params = {
          currentPage: 1,
          perPage: 10,
          startTime:
            this.value1 == ""
              ? this.getDate2(this.currentDate)
              : this.getDate2(this.value1),
          payment: 1,
        };
        getIntegralList();
      }
      if (this.value2 == "收入") {
        params = {
          currentPage: 1,
          perPage: 10,
          startTime:
            this.value1 == ""
              ? this.getDate2(this.currentDate)
              : this.getDate2(this.value1),
          payment: 2,
        };
        getIntegralList();
      }
      getIntegralList(params).then((res) => {
        console.log("getIntegral:", res);
        console.log(params);
        this.length = res.result.length;
        this.integralList = res.result.list;
      });
    },
    back() {
      this.$router.go(-1);
    },
    choiceDate() {
      this.show1 = true;
    },
    choiceAll() {
      this.show2 = true;
    },
    //转换时间格式
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    getDate2(date) {
      var time = new Date(date);
      var year = time.getFullYear();
      var month = ("" + (time.getMonth() + 1)).slice(-2);
      var mydate = year + "-" + month;
      return mydate;
    },
    // getDate(date) {
    //   var time = new Date(date);
    //   var year = time.getFullYear();
    //   var month = ("0" + (time.getMonth() + 1)).slice(-2);
    //   var mydate = year + "年" + month + "月";
    //   return mydate;
    // },
    onConfirm1(value) {
      this.show1 = false;
      this.value1 = value;
      console.log(this.getDate2(this.value1));
      this.currentPage = 1;
      this.loading = true;
      this.getIntegral();
    },
    onCancel1() {
      this.show1 = false;
    },
    onConfirm2(value) {
      this.show2 = false;
      this.value2 = value;
      console.log(this.value2);
      this.currentPage = 1;
      this.loading = true;
      this.getIntegral();
    },
    onCancel2() {
      this.show2 = false;
    },
  },
};
</script>

<style lang="less" scoped>
.reduce {
  font-size: 14px;
  color: green !important;
  font-weight: bold;
}
.noMore {
  display: flex;
  justify-content: center;
  font-size: 13px;
  color: #cccccc;
  align-items: center;
  padding: 20px 0;
  box-sizing: border-box;
}
.downmenu {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  font-size: 15px;
  & > div:nth-child(3) {
    transform: translateX(-2.7vw);
    color: #dbdddf;
  }
  .van-icon {
    transform: translateX(-25px);
  }
}
.text {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding: 30px 15px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  & > div:nth-child(1) {
    & > div:nth-child(1) {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
    }
    & > div:nth-child(2) {
      font-size: 12px;
    }
  }
  & > div:nth-child(2) {
    font-size: 14px;
    color: #d43b33;
    font-weight: bold;
  }
}
</style>